<template>
    <!-- author：jiayi zhu
     date: 2018-3-23
     describe：设备信息-->
    <div class="control">
        <!-- 查询设备 -->
        <el-form :inline="true" ref="result" :model="result" class="demo-form-inline searchForm" style="height:120px;">
            <div>
	            <el-form-item label="传感器：">
                    <el-select v-model="result.sensor_num" clearable placeholder="请选择">
                        <el-option label="0001" value="0001"></el-option>
                        <el-option label="0002" value="0002"></el-option>
                    </el-select>
                </el-form-item><br/>
                <el-form-item label="时间：">
                    {{result.time}}
                </el-form-item>
                <el-form-item label="土壤湿度：">
                    {{result.humidity}}%
                </el-form-item>
                <!-- <div> -->
                <el-form-item label="上限阀值：(%)">
                    <el-input v-model="result.hum_top" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="下限阀值：(%)">
                    <el-input v-model="result.hum_bottom" placeholder="请输入内容"></el-input>
                </el-form-item>
            <!-- </div> -->
            <el-button type="primary" plain @click="modify()">确定</el-button>
            </div>
            <el-form-item>
              <el-badge class="item">
                <el-button class="share-button" icon="el-icon-success" :type="(is_warning?'warning':'success')">
                    {{(is_warning?'异常':'正常')}}
                </el-button>
              </el-badge>
            </el-form-item>
        </el-form>

        <!-- 设备表格 -->
        <div class="dataTable" :style="{'height':dataHei}">
        <div id="line" style="width:95%;"></div>
        </div>
    </div>
</template>

<script>
import "@/assets/css/common.css"
import jnTablemanage from '@/components/tableComponent.vue'
import {createLineChart} from "./js/lineChart.js";
import {setCookie,getCookie,delCookie} from '@/tools/cookie'

export default {
    name: 'equipmentMessage',
    data () {
        return {
            result:{
                sensor_num:"0001",
                limit_value:'',
                time:'2018-04-01 23:36:39',
                humidity:'26%',
            },
            type:'',
            ifModify:false,
            sensorData:[],
            sensorTime:[],
            is_warning:''
        }
    },
    methods: {
        getDataApi(){
            this.sensorData=[]
            this.sensorTime=[]
            var vm=this
            $.ajax({
                url: "http://by.gole.site/api/data/show",
                type: 'POST',
                async:false,
                data: JSON.stringify({
                    token:getCookie('token')
                }),
            }).done(function(res) {
                if(res.status==0){
                    vm.$message({
                      message:res.msg,
                      type: 'warning'
                    });
                }else{
                    for (var i = res.data.length-1; i >=0; i--) {
                        vm.sensorData.push(Number(res.data[i].data))
                        vm.sensorTime.push(res.data[i].add_time)
                    }
                    createLineChart(vm.sensorData,vm.sensorTime);
                    vm.result.sensor_num=res.data[0].sensor_num
                    vm.result.humidity=res.data[0].data
                    vm.result.time=res.data[0].add_time
                    vm.is_warning=res.is_warning
                }
            }).fail(function(res) {
                vm.$notify.error({
                  message: '数据请求失败！'
                });
            });
        },
        modify(){
            var vm=this
            $.ajax({
                url: "http://by.gole.site/api/warning/set",
                type: 'POST',
                async:false,
                data: JSON.stringify({
                    token:getCookie('token'),
                    hum_top:vm.result.hum_top,
                    hum_bottom:vm.result.hum_bottom,
                }),
            }).done(function(res) {
                if(res.status==0){
                    vm.$message({
                      message:res.msg,
                      type: 'warning'
                    });
                }else{
                    console.log(res)
                    vm.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                }
            }).fail(function(res) {
                vm.$notify.error({
                  message: '数据请求失败！'
                });
            });
        },
        intervalApi(){
            let intervalFunc = ()=>{
                this.getDataApi();
            }
            this.interval = setInterval(intervalFunc,3000)
        }
    },
    mounted(){
        this.getDataApi();
        this.intervalApi();
    },
    updated(){
        // createLineChart(this.sensorData,this.sensorTime);
    },
    components:{
      jnTablemanage
    },
    computed:{
        dataHei:function(){
          var dataHei=(document.documentElement.clientHeight-240)+'px'
          return dataHei
        },
    },
    destroyed(){
      clearInterval(this.interval)
    }
}
</script>

<style>
.el-dialog__body{
    max-height:560px !important;
    overflow: auto !important;
}
.el-upload--picture-card{
    width:60px !important;
    height:60px !important;
    line-height: 60px !important;
}
</style>